<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button class="filter-item" icon="el-icon-circle-plus-outline" @click="showDialog(null)">新增</el-button>
    </div>
    <el-table
      :data="tableInfo.data"
      border
      style="width:100%"
      class="init_table">

      <el-table-column
        align="center"
        width="50"
        type="index"
        label="序号">
      </el-table-column>

      <el-table-column
        align="center"
        prop="name"
        label="班组名称"
        :min-width="tableInfo.minWidth">
      </el-table-column>

      <el-table-column
        align="center"
        prop="leaderUserName"
        label="组长"
        :min-width="tableInfo.minWidth">
      </el-table-column>
      <el-table-column
        align="center"
        prop="leaderUserId"
        label="组长"
        :min-width="tableInfo.minWidth">
      </el-table-column>
      <el-table-column
        align="center"
        width="200"
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="showDialog(scope.row)">编辑</el-button>
          <el-button type="text" @click="dialogMemberVisible=true ; group=scope.row">成员管理</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination :v-show="tableInfo.total>0"
                     :current-page="tableQuery.pageNum"
                     :page-sizes="tableInfo.pageSizes"
                     :page-size="tableQuery.pageSize"
                     :total="tableInfo.total"
                     background layout="total, sizes, prev, pager, next, jumper"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"/>
    </div>

    <el-dialog title="维保班组" :visible.sync="dialogVisible" width="500px" top="10vh" :close-on-click-modal="false">
      <el-form ref="submitForm" :rules="rules" :model="submitData" label-position="right" label-width="100px">
        <el-row>
          <el-col :span="22">
            <el-form-item label="负责人：" prop="leaderUserId">
              <el-select style="width:100%"
                         v-model="submitData.leaderUserId"
                         filterable
                         remote
                         reserve-keyword
                         size="large"
                         placeholder="姓名"
                         :remote-method="remoteMethod"
                         :loading="selectLoading">
                <el-option
                  v-for="item in selectUser"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="班组名称：" prop="name">
              <el-input v-model="submitData.name"/>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button v-if="operateType=='add'" type="primary" @click="handleAddData">确定</el-button>
        <el-button v-else type="primary" @click="handleModifyData">确定</el-button>
      </div>
    </el-dialog>


    <el-dialog title="班组成员" :visible.sync="dialogMemberVisible" width="50%" top="10vh" :close-on-click-modal="false">
      <care-member-component :group="group"/>
    </el-dialog>

  </div>
</template>

<script>
  import {listCareGroup, addCareGroup, modifyCareGroup} from '@/api/ele/careGroup'
  import {listCareUnit} from '@/api/ele/careUnit'
  import {listCareUser} from '@/api/ele/careUser'
  import {careMember} from '@/api/ele'

  import {handleRequest} from '@/utils/system'

  import CareMemberComponent from './components/careMember'

  export default {
    components: {CareMemberComponent},
    data() {
      return {
        dialogVisible: false,
        dialogMemberVisible: false,
        operateType: null,
        group: null,
        submitData: {
          id: null,
          name: null,
          leaderUserId: null,
        },
        rules: {
          name: [{required: true, message: '不能为空', trigger: 'change'}],
          creditCode: [{required: true, message: '不能为空', trigger: 'change'}],
          phoneNumber: [{required: true, message: '不能为空', trigger: 'change'}],
          liaison: [{required: true, message: '不能为空', trigger: 'change'}]
        },
        tableQuery: {
          creditCode: null,
          name: null,
          pageNum: 1,
          pageSize: 10,
          sort: 'create_dat1e',
          order: 'descending',

        },
        tableInfo: {
          data: null,
          minWidth: 50,
          total: null,
          pageSizes: [10, 30, 50, 100, 500, 1000],
        },
        selectUser: [],
        selectLoading: false,

      }
    },
    mounted() {
      this.refreshTable();
    }
    ,
    methods: {
      remoteMethod(query) {
        if (query !== '') {
          this.selectLoading = true
          handleRequest({
            method: listCareUser,
            data: {
              name: query,
              pageNum: 1,
              pageSize: 1000
            },
            successCall: (data) => {
              this.selectUser = data.rows
              this.selectLoading = false
            }
          })
        } else {
          this.selectUser = [];
        }
      },
      resetSubmitData() {
        this.submitData = {
          id: null,
          name: null,
          leaderUserId: null,
        }
      }
      ,
      showDialog(row) {
        this.resetSubmitData()
        this.operateType = 'add'
        this.dialogVisible = true
        if (row) {
          this.submitData = {...row}
          this.selectUser = [{id: row.leaderUserId, name: row.leaderUserName}]
          this.operateType = 'modify'
        } else {
          this.selectUser = []
        }
        this.$nextTick(() => {
          this.$refs['submitForm'].clearValidate()
        })
      },

      handleAddData() {
        this.$refs['submitForm'].validate((valid) => {
          if (valid) {
            handleRequest({
              method: addCareGroup,
              data: this.submitData,
              operateType: "新增",
              warnAlertShow: true,
              successAlertShow: true,
              failAlertShow: true,
              successCall: () => {
                this.dialogVisible = false;
                this.refreshTable();
              }
            })
          }
        })
      }
      ,
      handleModifyData() {
        this.$refs['submitForm'].validate((valid) => {
          if (valid) {
            handleRequest({
              method: modifyCareGroup,
              data: this.submitData,
              operateType: "修改",
              warnAlertShow: true,
              successAlertShow: true,
              failAlertShow: true,
              successCall: () => {
                this.dialogVisible = false;
                this.refreshTable();
              }
            })
          }
        })
      },
      refreshTable() {
        handleRequest({
          method: listCareGroup,
          data: this.tableQuery,
          successCall: (data) => {
            this.tableInfo.data = data.rows
            this.tableInfo.total = data.total
          }
        })
      },
      handleSizeChange(val) {
        this.tableQuery.pageSize = val
        this.refreshTable()
      },
      handleCurrentChange(val) {
        this.tableQuery.pageNum = val
        this.refreshTable()
      },
    }
  }
</script>
